<template>
  <div class="classMngContainer">
    <div slot="header">
      <el-button type="text" style="color: rgb(216,223,234)"
                 class="class-lookMoreBtn"
                 @click="goview('集控人员组织架构')">
        查看更多...
      </el-button>
    </div>
    <div style="margin-top: 0px">
      <div v-if="choose" class="classMngSubContainer">
        <el-row class="classMngRow" type="flex" justify="center">
          <el-col :span="4" v-for="(o, index) in manager" :key="index" style="padding: 5px;">
            <el-card class="classMngCard" :body-style="{ padding: '0px' }" @click.native="moreInfo(o)">
              <el-image :src="o.url" class="image" fit="fill"></el-image>
              <el-row :gutter="0" style="height: 2.0vh">
                <el-col :span="16">
                  <div style="font-size: 1.5vh" class="contentTextCenter">
                    <span>{{o.name}}</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <el-tooltip class="item" effect="dark" content="休息" placement="right">
                    <img v-show="o.status==='休息'" src="@/assets/img/status/休息.png" style="width: 1.8vh;height: 1.8vh">
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="出差" placement="right">
                    <img v-show="o.status==='出差'" src="@/assets/img/status/出差.png" style="width: 1.8vh;height: 1.8vh">
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="加班" placement="right">
                    <img v-show="o.status==='加班'" src="@/assets/img/status/加班.png" style="width: 1.8vh;height: 1.8vh">
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="上班" placement="right">
                    <img v-show="o.status==='上班'" src="@/assets/img/status/上班.png" style="width: 1.8vh;height: 1.8vh">
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="请假" placement="right">
                    <img v-show="o.status==='请假'" src="@/assets/img/status/请假.png" style="width: 1.8vh;height: 1.8vh">
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="风场" placement="right">
                    <img v-show="o.status==='风场'" src="@/assets/img/status/风场.png" style="width: 70%;height: 70%">
                  </el-tooltip>
                </el-col>
              </el-row>
              <el-row style="font-size: 1.2vh" class="contentTextCenter">
                <span>{{o.position}}</span>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
        <el-row class="classMngRow" type="flex" justify="center">
          <el-col :span="4" v-for="(o, index) in chief" :key="index" style="padding: 5px;">
            <el-card class="classMngCard" :body-style="{ padding: '0px' }" @click.native="moreInfo(o)">
              <el-image :src="o.url" class="image" fit="fill"></el-image>
              <el-row :gutter="0" style="height: 2.0vh">
                <el-col :span="16">
                  <div style="font-size: 1.3vh;margin-top: 0px" class="contentTextCenter">
                    <span>{{o.name}}</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <el-tooltip class="item" effect="dark" content="休息" placement="right">
                    <img v-show="o.status==='休息'" src="@/assets/img/status/休息.png" style="width:1.8vh;height:1.8vh">
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="出差" placement="right">
                    <img v-show="o.status==='出差'" src="@/assets/img/status/出差.png" style="width:1.8vh;height:1.8vh">
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="加班" placement="right">
                    <img v-show="o.status==='加班'" src="@/assets/img/status/加班.png" style="width:1.8vh;height:1.8vh">
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="上班" placement="right">
                    <img v-show="o.status==='上班'" src="@/assets/img/status/上班.png" style="width:1.8vh;height:1.8vh">
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="请假" placement="right">
                    <img v-show="o.status==='请假'" src="@/assets/img/status/请假.png" style="width:1.8vh;height:1.8vh">
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="风场" placement="right">
                    <img v-show="o.status==='风场'" src="@/assets/img/status/风场.png" style="width: 1.4vh;height: 1.4vh">
                  </el-tooltip>
                </el-col>
              </el-row>
              <div style="font-size: 1.2vh" class="contentTextCenter">
                <span>{{o.position}}</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row class="classMngRow" type="flex" justify="center">
          <el-col :span="3" v-for="(o, index) in senior" :key="index" style="padding: 5px;">
            <el-card class="classMngCard" :body-style="{ padding: '0px' }" @click.native="moreInfo(o)">
              <el-image :src="o.url" class="image" fit="fill"></el-image>
              <el-row :gutter="0" style="height: 2.0vh">
                <el-col :span="16">
                  <div style="font-size: 0.6vw;padding-top: 2px" class="contentTextCenter">
                    <span>{{o.name}}</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <el-tooltip class="item" effect="dark" content="休息" placement="right">
                    <img v-show="o.status==='休息'" src="@/assets/img/status/休息.png" style="width: 1.4vh;height: 1.4vh">
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="出差" placement="right">
                    <img v-show="o.status==='出差'" src="@/assets/img/status/出差.png" style="width: 1.4vh;height: 1.4vh">
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="加班" placement="right">
                    <img v-show="o.status==='加班'" src="@/assets/img/status/加班.png" style="width: 1.4vh;height: 1.4vh">
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="上班" placement="right">
                    <img v-show="o.status==='上班'" src="@/assets/img/status/上班.png" style="width: 1.4vh;height: 1.4vh">
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="请假" placement="right">
                    <img v-show="o.status==='请假'" src="@/assets/img/status/请假.png" style="width: 1.4vh;height: 1.4vh">
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="风场" placement="right">
                    <img v-show="o.status==='风场'" src="@/assets/img/status/风场.png" style="width: 1.4vh;height: 1.4vh">
                  </el-tooltip>
                </el-col>
              </el-row>
              <div style="font-size: 1.2vh" class="contentTextCenter">
                <span>{{o.position}}</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row class="classMngRow" type="flex" justify="center">
          <el-col :span="3" v-for="(o, index) in watcher" :key="index" style="padding: 5px;">
            <el-card class="classMngCard" :body-style="{ padding: '0px' }" @click.native="moreInfo(o)">
              <el-image :src="o.url" class="image" fit="fill"></el-image>
              <el-row :gutter="0" style="height: 2.0vh">
                <el-col :span="16">
                  <div style="font-size: 0.6vw;padding-top: 2px" class="contentTextCenter">
                    <span>{{o.name}}</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <el-tooltip class="item" effect="dark" content="休息" placement="right">
                    <img v-show="o.status==='休息'" src="@/assets/img/status/休息.png" style="width: 1.4vh;height: 1.4vh">
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="出差" placement="right">
                    <img v-show="o.status==='出差'" src="@/assets/img/status/出差.png" style="width: 1.4vh;height: 1.4vh">
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="加班" placement="right">
                    <img v-show="o.status==='加班'" src="@/assets/img/status/加班.png" style="width: 1.4vh;height: 1.4vh">
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="上班" placement="right">
                    <img v-show="o.status==='上班'" src="@/assets/img/status/上班.png" style="width: 1.4vh;height: 1.4vh">
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="请假" placement="right">
                    <img v-show="o.status==='请假'" src="@/assets/img/status/请假.png" style="width: 1.4vh;height: 1.4vh">
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="风场" placement="right">
                    <img v-show="o.status==='风场'" src="@/assets/img/status/风场.png" style="width: 1.4vh;height: 1.4vh">
                  </el-tooltip>
                </el-col>
              </el-row>
              <div style="font-size: 1.2vh" class="contentTextCenter">
                <span>{{o.position}}</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div v-else class="classMngSubContainer">
        <el-row type="flex">
          <el-button type="text" @click="choose=true" style="color: white">
            <i class="el-icon-back"></i>
          </el-button>
        </el-row>
        <div class="detailImgContainer">
          <img :src="url" style="width: 100%; height: 100%;">
        </div>
        <el-row type="flex" justify="center">
          <div class="contentTextCenter">
            <div class="detailTitle">{{position+": "+name}}</div>
            <div style="padding: 0 3vw" >
              <el-tooltip class="item" effect="dark" content="休息" placement="right">
                <img v-show="status==='休息'" src="@/assets/img/status/休息.png" style="width: 90%;height: 90%">
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="出差" placement="right">
                <img v-show="status==='出差'" src="@/assets/img/status/出差.png" style="width: 90%;height: 90%">
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="加班" placement="right">
                <img v-show="status==='加班'" src="@/assets/img/status/加班.png" style="width: 90%;height: 90%">
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="上班" placement="right">
                <img v-show="status==='上班'" src="@/assets/img/status/上班.png" style="width: 90%;height: 90%">
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="请假" placement="right">
                <img v-show="status==='请假'" src="@/assets/img/status/请假.png" style="width: 90%;height: 90%">
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="风场" placement="right">
                <img v-show="status==='风场'" src="@/assets/img/status/风场.png" style="width: 90%;height: 90%">
              </el-tooltip>
            </div>
          </div>
        </el-row>
        <el-row type="flex" class="detailContent" justify="space-around">
          <el-col :span="1"></el-col>
          <el-col :span="5">
            <div>
              <span>人员介绍：</span>
            </div>
          </el-col>
          <el-col :span="18">
            <div>{{introduction}}</div>
          </el-col>
        </el-row>
        <el-row type="flex" class="detailContent" justify="space-around">
          <el-col :span="1"></el-col>
          <el-col :span="5">
            <div>
              <span>工作经历：</span>
            </div>
          </el-col>
          <el-col :span="18">
            <div>{{resume}}</div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/network/request'
import { baseURL } from '../../../../../config/baseConfig'
export default {
  name: 'classManagement',
  data () {
    return {
      choose: true,
      url: '',
      position: '',
      name: '',
      status: '',
      introduction: '',
      resume: '',
      users: [],
      manager: [],
      chief: [],
      senior: [],
      watcher: []
    }
  },
  beforeMount () {
    const that = this
    request({
      method: 'post',
      url: '/crew/showcrewmem',
      params: {
        pageSize: 7,
        pagenum: 1
      }
    }).then((res) => {
      request({
        method: 'post',
        url: '/crew/showcrewmem',
        params: {
          pageSize: res.data.data.totalrecords,
          pagenum: 1
        }
      }).then((res) => {
        console.log('@@@@@@@@@@')
        console.log(res.data.data)
        this.users = res.data.data.result
        this.users.forEach(item => {
          request({
            method: 'post',
            url: '/crew/getcrewmem',
            params: {
              id: item.id
            }
          }).then(res => {
            // console.log(res)
            if (res.data.data.map.length !== 0) {
              that.$set(item, 'url', baseURL + '/' + res.data.data.map[0].url)
              item.url = baseURL + '/' + res.data.data.map[0].url
              // console.log('class ' + item.url)
            } else {
              that.$set(item, 'url', '')
              item.url = ''
            }
          }).catch((error) => {
            console.log(error)// 异常
          })
          setTimeout(() => {
            if (item.position === '集控中心经理') {
              this.manager.push(item)
            } else if (item.position === '总值长') {
              this.chief.push(item)
            } else if (item.position === '值长') {
              this.senior.push(item)
            } else {
              this.watcher.push(item)
            }
          }, 20)
          // if (item.position === '集控中心经理') {
          //   this.manager.push(item)
          // } else if (item.position === '总值长') {
          //   this.chief.push(item)
          // } else if (item.position === '值长') {
          //   this.senior.push(item)
          // } else {
          //   this.watcher.push(item)
          // }
        })
        // this.senior.forEach(item => {
        //   this.chief.push(item)
        // })
        // console.log(this.senior)
      })
    })
  },
  methods: {
    formatTagType (status) {
      // console.log('s ' + status)
      if (status === '上班') {
        return 'onTheJob'
      } else if (status === '出差') {
        return 'evection'
      } else if (status === '请假') {
        return 'leave'
      } else if (status === '休息') {
        return 'rest'
      } else if (status === '风场') {
        return 'wind'
      } else {
        // 目前等同于 status === '加班'
        return 'extra'
      }
    },
    moreInfo (item) {
      this.choose = false
      this.url = item.url
      this.position = item.position
      this.name = item.name
      this.status = item.status
      this.introduction = item.introduction
      this.resume = item.resume
      // console.log(item)
    },
    goview (name) {
      this.$router.push({ name }).catch(err => {
        err && console.log('刷新') // 待优化
      })
    }
  }
}
</script>

<style scoped>
.classMngContainer {
  width: 100%;
  height: 100%;
  padding-top: 0.2vh;
  background-color: RGB(14,16,54);
}
.classMngSubContainer {
  margin-top: -10px;
  height: 100%;
  padding: 0 0.5vw;
}
.classMngRow {
  height: 25%;
  margin: 0;
}
.classMngCard {
  cursor:pointer;
  border: 1px solid rgba(42, 85, 102, 0.4);
  height: 100%;
  background-color: RGB(34, 38, 59);
}
.el-card /deep/ .el-card__body {
  /*border: RGB(63, 70, 94) solid 1px;*/
  height: 100%;
  color: #d3dce6;
  /*background-color: RGB(46, 52, 76);*/
}
.image {
  margin: 0.4vh auto 0.2vh auto;
  width: 2.1vw;
  height: 5.0vh;
  display: block;
}
.contentTextCenter {
  padding-left: 2px;
  text-align: left;
}
.detailImgContainer {
  width: 30%;
  height: 40%;
  margin: 0 auto;
}
.detailTitle {
  font-size: 1.5vh;
  margin: 0.4vh auto 0.3vh;
  text-align: center;
}
.detailContent {
  font-size: 1.3vh;
  margin-top: 0.2vh;
  padding: 0 1vw;
}
/*.contentTextCenter {*/
/*  padding-left: 2px;*/
/*  text-align: left;*/
/*}*/
.class-lookMoreBtn /deep/{
  /*float: right;*/
  padding: 0.5vh 0 0.2vh 30vw;
  color: #8c939d;
  font-size: 0.9vw;
}
</style>
